<template>
	<view>
		<!-- 头部 -->
		<uni-nav-bar fixed :status-bar="true" @clickLeft="scanCode" @clickRight="goCloud">
			<view slot="left" class="navbar-icon icon-font">&#xe686;</view>
			<!-- #ifdef APP-PLUS || H5 -->
			<view slot="right" class="navbar-icon icon-font">&#xe649;</view>
			<!-- #endif -->
			<view class="tac" v-if="scrollTop <= 5">账号</view>
		</uni-nav-bar>

		<scroll-view class="page-content" scroll-y="true" @scroll="scroll">
			<view class="empty-user" v-if="!hasLogin">
				<view>登录网易云音乐</view>
				<view>手机电脑多端同步，尽享海量高品质音乐</view>
				<navigator class="login-btn" url="/pages/subpages/account/login">立即登录</navigator>
			</view>

			<template v-if="hasLogin">
				<view class="userinfo-box flex-box">
					<view class="avatar"><image class="img" :src="userInfo.avatarUrl"></image></view>
					<view class="flex-item">
						<view class="fl">
							<view class="name">{{ userInfo.nickname }}</view>
							<view class="level">lv{{ userInfo.level }}</view>
						</view>

						<image class="sign fr" src="/static/image/account/a_03.png"></image>
					</view>
				</view>

				<view class="nav-bar flex-box">
					<view class="flex-item">
						{{ userInfo.eventCount }}
						<view class="txt">动态</view>
					</view>
					<view class="flex-item">
						{{ userInfo.follows }}
						<view class="txt">关注</view>
					</view>
					<view class="flex-item">
						{{ userInfo.followeds }}
						<view class="txt">粉丝</view>
					</view>
					<view class="flex-item">
						<view class="icon-font">&#xe622;</view>
						<view class="txt">编辑资料</view>
					</view>
				</view>
			</template>

			<view class="adv"><image class="img" src="/static/image/account/a_07.png"></image></view>

			<view class="mall-bar flex-box">
				<view class="flex-item">
					<image class="mall-img" src="/static/image/account/a_m1.png"></image>
					消息
				</view>
				<view class="flex-item">
					<image class="mall-img" src="/static/image/account/a_m2.png"></image>
					商城
					<view class="txt">现实29包邮</view>
				</view>
				<view class="flex-item">
					<image class="mall-img" src="/static/image/account/a_m3.png"></image>
					演出
					<view class="txt">天鹅湖</view>
				</view>
				<view class="flex-item">
					<image class="mall-img" src="/static/image/account/a_m4.png"></image>
					个性换肤
				</view>
			</view>

			<uni-list>
				<uni-list-item class="aaa" title="口袋彩铃" thumb="/static/image/account/a_16.png" />
				<uni-list-item title="我的订单" thumb="/static/image/account/a_19.png" />
			</uni-list>

			<uni-list class="mt16"><uni-list-item title="创作者中心" thumb="/static/image/account/a_09.png" /></uni-list>

			<uni-list class="mt16">
				<uni-list-item title="设置" thumb="/static/image/account/a_21.png" />
				<uni-list-item title="夜间模式" thumb="/static/image/account/a_23.png" show-switch="true" />
				<uni-list-item title="定时开关" thumb="/static/image/account/13.png" />
				<uni-list-item title="音乐闹钟" thumb="/static/image/account/13.png" />
			</uni-list>

			<uni-list class="mt16">
				<uni-list-item title="在线听歌免流量" thumb="/static/image/account/14.png" />
				<uni-list-item title="优惠券" thumb="/static/image/account/15.png" />
			</uni-list>

			<uni-list class="mt16">
				<uni-list-item title="分享网易云音乐" thumb="/static/image/account/16.png" />
				<uni-list-item title="关于" thumb="/static/image/account/17.png" />
			</uni-list>

			<view v-if="hasLogin" class="logout" @tap="logout">退出登录</view>
		</scroll-view>
		
		<confirm ref="confirm"></confirm>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar/uni-nav-bar.vue';
import uniList from '@/components/uni-list/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list/uni-list-item/uni-list-item.vue';
import confirm from '@/components/message/confirm.vue';
import { logout } from '@/api/account.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			scrollTop: 0
		};
	},
	computed: {
		...mapGetters(['userInfo', 'hasLogin'])
	},
	methods: {
		goCloud() {
			this.$pubFuc.showToast('暂未开放');
		},
		scanCode() {
			let that = this;
			uni.scanCode({
				success: function(res) {
					console.log(res);
					that.$pubFuc.showToast(res.result);
				}
			});
		},
		scroll(e) {
			this.scrollTop = e.detail.scrollTop;
			if (e.detail.scrollTop <= 5) {
				this.scrollTop = 0;
			}
		},
		logout() {
			this.$refs.confirm.open({
				title: '网易云音乐',
				content: '确定要退出当前账号吗?',
				confirm: () => {
					logout().then(res => {
						this.$store.dispatch('removeLogin');
						uni.navigateTo({
							url: '/pages/subpages/account/login'
						});
					});
				}
			});
		}
	},
	components: {
		uniNavBar,
		uniList,
		uniListItem,
		confirm
	}
};
</script>

<style lang="scss">
page {
	color: #333;
}

.tac {
	flex: 1;
}

.empty-user {
	background: #fff;
	padding-top: 50rpx;
	text-align: center;
	line-height: 40rpx;

	.login-btn {
		margin: 22rpx auto 0;
		width: 720rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		border-radius: 50rpx;
		border: 1px solid #cdcdcd;
	}
}

.adv {
	background-color: #fff;
	padding-top: 32rpx;

	.img {
		display: block;
		width: 686rpx;
		height: 120rpx;
		margin: 0 auto;
	}
}

.mall-bar {
	background-color: #fff;
	padding-top: 38rpx;
	padding-bottom: 20rpx;
	text-align: center;
	font-size: 26rpx;
	font-weight: 400;
	line-height: 35rpx;

	.mall-item {
		width: 25%;
	}

	.mall-img {
		display: block;
		width: 48rpx;
		height: 48rpx;
		margin: 0 auto 24rpx;
	}

	.txt {
		color: #999;
		font-weight: 400;
		font-size: 24rpx;
		transform: scale(0.84);
	}
}

.mt16 {
	margin-top: 16rpx;
}

.userinfo-box {
	background-color: #fff;
	padding-top: 50rpx;
	height: 200rpx;

	.avatar {
		margin-left: 30rpx;
		width: 120rpx;
		height: 120rpx;
		background: #d6d8da;
		overflow: hidden;
		border-radius: 50%;
	}

	.img {
		height: 100%;
		width: 100%;
	}

	.flex-item {
		margin-left: 20rpx;

		.name {
			color: #302f30;
			line-height: 68rpx;
			font-weight: 600;
		}

		.level {
			width: 100rpx;
			height: 50rpx;
			color: #fff;
			font-style: italic;
			line-height: 50rpx;
			text-align: center;
			border-radius: 50rpx;
			background: #d7d3d4;
		}
	}

	.sign {
		width: 128rpx;
		height: 52rpx;
		border-radius: 50rpx;
		margin-top: 16rpx;
		margin-right: 32rpx;
	}
}

.nav-bar {
	text-align: center;
	background-color: #fff;
	text-align: center;

	.flex-item {
		height: 80rpx;
		border-right: 1rpx solid #cdcacb;

		&:last-child {
			border: 0;
		}
	}

	.txt {
		color: #939293;
		font-weight: 400;
	}
}

.logout {
	background-color: #fff;
	margin-top: 16rpx;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	color: #dd2d20;
}

/* 提示窗口 */
.uni-tip {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
	padding: 15px;
	width: 300px;
	background-color: #fff;
	border-radius: 10px;
}

.uni-tip-title {
	margin-bottom: 10px;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	color: #333;
}

.uni-tip-content {
	/* padding: 15px;
	 */
	font-size: 14px;
	color: #666;
}

.uni-tip-group-button {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	margin-top: 20px;
}

.uni-tip-button {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #3b4144;
}
</style>
